<template>
  <div class="course-detail">
    <div class="header">
      <header>
        <span class="back" @click="$router.go(-1)">
          <img src="@/assets/images/return.png" />
        </span>
        <div class="h-title">
          <h3 v-if="top < 30">课程详情</h3>
          <p v-else>
            <span :class="{'active':active=='tro'}" @click="scrollTo('tro')">课程介绍</span>
            <span :class="{'active':active=='list'}" @click="scrollTo('list')">课程大纲</span>
            <span :class="{'active':active=='com'}" @click="scrollTo('com')">课程评价</span>
          </p>
        </div>
        <p class="right-tabs">
          <span class="cao" @click="share">
            <img src="@/assets/images/share.png" alt />
          </span>
        </p>
      </header>
    </div>
    <div class="cd-body" v-show="detail.title" @scroll.passive="getScroll($event)">
      <div class="cd-info">
        <p class="info-title">{{detail.title}}</p>
        <i class="info-collect" :class="{'ic-active':detail.is_collect}" @click="collect"></i>
        <!-- 非面授 -->
        <p class="info-price" v-if="!detail.is_free">
          <img class="price-ico" :src="$store.state.config.price_ico" />
          <!-- <font>{{detail.price | toFixPrice}}</font> -->
          <font>{{detail.price | toFixPrice}}</font>
          <img
            v-if="detail.underlined_price"
            class="price-ico"
            :src="$store.state.config.price_ico"
          />
          <font
            v-if="detail.underlined_price"
            class="underline"
          >{{detail.underlined_price | toFixPrice}}</font>
        </p>
        <p class="info-price cd-free" v-else>免费</p>
        <div v-if="detail.course_type != 7">
          <p class="info-com">共{{detail.total_periods}}课时 | {{detail.sales_num}}人已报名</p>
          <p
            v-if="$pub.showPlayType(detail.course_type)"
            class="info-com"
          >开课时间：{{detail.start_play_date | toFixPrice}} - {{detail.end_play_date | toFixPrice}}</p>
        </div>
        <!-- 面授 -->
        <div style="padding-top: 10px;" v-else>
          <p
            class="info-com"
            v-if="detail.store_num"
          >报名上限：{{detail.store_num}}人 | 剩余名额：{{detail.stock}}</p>
          <p class="info-com">报名截止时间：{{detail.enter_end_date | toFixPrice}}</p>
          <p
            class="info-com"
          >开课时间：{{detail.start_play_date | toFixPrice}} - {{detail.end_play_date | toFixPrice}}</p>
          <p class="info-com">开课地点：{{detail.province_name + detail.district_name +detail.address}}</p>
        </div>
      </div>
      <div class="cd-actives" v-if="couponList.length || detail.is_vip_course">
        <p>活动：</p>
        <section>
          <div class="actives-item" v-if="couponList.length" @click="getCoupon">
            <span>优惠</span>
            <span>
              <em>领取优惠券最多可减</em>
              <img class="price-ico" :src="$store.state.config.price_ico" />
              <i>{{max_price | toFixPrice(0)}}</i>
            </span>
            <font>领取</font>
          </div>
          <div class="actives-item" v-if="detail.is_vip_course" @click="goVip">
            <span>VIP</span>
            <span
              v-if="detail.is_vip_user"
            >您的会员到期日为：{{detail.vip_user_end | fomartTime('yyyy.MM.dd')}}</span>
            <span v-else>免费观看</span>
            <font>{{detail.is_vip_user?'续费':'开通'}}</font>
          </div>
        </section>
      </div>
      <div class="cd-teachers com-style" v-if="teachers.length">
        <p class="cd-title">教学团队</p>
        <ul>
          <li @click="goTeacher(item.teacher_id)" v-for="(item,index) in teachers" :key="index">
            <img :src="item.teacher_avatar" />
            <span>{{item.teacher_name}}</span>
          </li>
        </ul>
      </div>
      <div id="tro" class="cd-tro com-style">
        <p class="cd-title">课程介绍</p>
        <div class="cd-details" v-html="detail.course_details"></div>
      </div>
      <div id="list" class="cd-list com-style">
        <p class="cd-title">课程大纲</p>
        <charpter v-if="detail.course_type != 9" :charpters="list" :detail="detail"></charpter>
        <course-item :course="courses" :itemStyle="true" v-if="detail.course_type == 9"></course-item>
      </div>
      <div id="com" class="cd-comment com-style">
        <p class="cd-title">课程评论</p>
        <commentItem></commentItem>
      </div>
    </div>
    <van-button class="course-btn" :class="{'vip-icon': state == 2}" @click="submit">{{state_name[state]}}</van-button>
    <!-- 分享 -->
    <coupon ref="coupon" :couponList="couponList" @setCoupon="setCoupon"></coupon>
    <shareBox ref="share"></shareBox>
  </div>
</template>

<script>
import { list, sysCourseList, courseChapter, cancel, downOrder, joinStudy } from "@/request/api"; 
import { collect } from "@/request2/api"; 
import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
import shareBox from "@/components/ShareBox";
import commentItem from "@/components/CommentItem";
import charpter from "@/components/Charpter";
import courseItem from "@/components/CourseItem";
import coupon from "@/components/Coupon";
export default {
    name: "CourseDetail",
    components: {
        shareBox,
        commentItem,
        charpter,
        courseItem,
        coupon
    },
    data() {
        return {
            top: 0,
            id: "",
            detail: {},
            teachers: [],
            couponList: [],
            courses: [],
            list: [],
            qrimg: "",
            active: "",
            state: 0,
            state_name: ["立即报名", "立即学习", "加入学习"],
            max_price: 0
        };
    },
    methods: {
        ...mapMutations(['course1','course2','cut']),
        getDetail() {
            list({ id: this.id }).then(res => {
                //   console.log(res.data);
                this.detail = res.data.info;
                this.couponList = res.data.couponList;
                this.teachers = res.data.teachers;
                if (this.couponList.length) {
                    let max_price = 0;
                    res.data.couponList.forEach(item => {
                        if (max_price < item.discounted_price) {
                            max_price = item.discounted_price;
                        }
                    });
                    this.max_price = max_price;
                }
                if (res.info.course_type == 9) {
                    this.getSysCourse();
                }
                if (res.info.is_buy || res.info.is_join_study) {
                    this.state = 1;
                } else {
                    if (res.info.is_vip_course && res.info.is_vip_user) {
                        this.state = 2;
                    }
                }
            });
        },
        getCharpter() {
            courseChapter({id: this.id}).then(res => {
                // console.log(res.data);
                this.list = res.data;
            });
        },
        getSysCourse() {
            sysCourseList({ id: this.id }).then(res => {
                console.log(res);
                this.courses = res;
            });
        },
        share() {
            this.$refs.share.showModel();
        },
        collect() {
            if (!this.detail.is_collect) {
                collect({
                    course_basis_id: this.id,
                    type: 1
                }).then((res) => {
                    // console.log(res);
                    this.$toast({
                        message: "收藏成功",
                        type: "success",
                        duration: 800,
                        onClose: () => {
                            this.getDetail();
                        }
                    });
                });
            } else {
                cancel(this.detail.collect_id).then((res) => {
                    console.log(res);
                    this.$toast({
                        message: "取消收藏",
                        duration: 800,
                        onClose: () => {
                            this.getDetail();
                        }
                    });
                });
            }
        },
        getCoupon() {
            this.$refs.coupon.showModel();
        },
        setCoupon(index) {
            this.couponList[index].is_can_get = 0;
        },
        goVip() {
            this.$router.push({
                name: "Vip"
            });
        },
        goTeacher(id) {
            this.$router.push({
                name: "star",
                query: {
                    id: id
                }
            });
        },
        getScroll(event) {                            //下拉加载
            // 滚动条距离头部的距离scrollBottom
            let scrollBottom =event.target.scrollTop ;
            this.top=scrollBottom;
            // console.log(scrollBottom);
        },
        scrollTo(name) {
            this.active = name;
            // this.getScroll()
            // let h = window.$(`#${name}`).offset().top - 45;
            // window.$("html,body").animate({ scrollTop: h }, 500);
        },
        submit() {
            if (this.$pub.checkLogin()) {
                if (this.state == 0) {
                //购买 免费课
                if (this.detail.is_free) {
                    downOrder({
                        shop_id: this.id,
                        type: this.detail.course_type
                    }).then((res) => {
                        console.log(res);
                        this.$toast({
                            message: "成功",
                            type: "success",
                            duration: 1000,
                            onClose: () => {
                                this.getDetail();
                            }
                        });
                    });
                } else {
                    // 收费
                    if (
                        this.detail.stock == 0 &&
                        this.detail.store_num > 0 &&
                        (this.detail.course_type == 7 || this.detail.course_type == 3)
                    ) {
                    this.$toast({
                        message: "你来晚了哦,名额已经没有了~",
                        duration: 1500
                    });
                    return;
                    }
                    this.$router.push({
                    name: "Purchase",
                    query: {
                        id: this.id,
                        type: this.detail.course_type
                    }
                    });
                }
                } else if (this.state == 2) {
                // 加入学习
                joinStudy({
                        course_basis_id: this.id,
                        order_id: 0,
                        join_from: 1,
                        course_type: this.detail.course_type
                    }).then((res) => {
                        console.log(res);
                        this.$toast({
                            message: "成功",
                            type: "success",
                            duration: 1000,
                            onClose: () => {
                                this.getDetail();
                            }
                        });
                    });
                } else {
                // 立即学习
                this.$router.push({
                    name: "MyStudyDetail",
                    query: {
                    course_id:
                        this.detail.course_type == 9 ? this.courses[0].id : this.id
                    }
                });
            }
        }
    },
    init() {
        this.id = this.$route.query.id;
        this.getDetail();
        this.getCharpter();
    }
    },
    created() {
        this.init();
        this.course1()
    },
    watch: {
      $route(val, old) {
          if (val.query.id != old.query.id) {
              this.init();
          }
      }
    },
    filters: {
      toFixPrice: function(value) {
        let date = new Date(value*1000);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? "0" + MM : MM;
        let d = date.getDate();
        d = d < 10 ? "0" + d : d;
        let a=""
        let h = date.getHours();
        h = h < 10 ? "0" + h : h;
        let m = date.getMinutes();
        m = m < 10 ? "0" + m : m;
        let s = date.getSeconds();
        s = s < 10 ? "0" + s : s;
        return MM + "月" + d + "日" + h + ":" + m ;
      }
    },
};
</script>

<style lang="scss" scoped>
@import '@/css/_vw_func.scss';
@import "@/assets/CSS/index.scss";
*{
    padding:0;
    margin:0;
}
.course-detail {
  width: 100%;
}
.vip-icon::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  background: url("../../../assets/images/vip-use-btn.png") no-repeat;
  background-size: 100% 100%;
  width: 88px;
  height: 88px;
}
.header {
  background: #fff;
  height: 50px;
  line-height: 40px;
  border-bottom: 1px solid #f0f2f5;
  header {
    @extend %flex-center;
    height: 40px;
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    z-index: 9;
  }
  .header_box {
    width: 100%;
    height: 100%;
  }
  .back {
    @extend %flex-center;
    width: 50px;
    height: 100%;
    img {
      width: 10px;
      height: 15px;
    }
  }
  .h-title {
    flex: 2;
    h3 {
      text-align: center;
      font-size: 16px;
      color: #595959;
    }
    p {
      display: flex;
      span {
        flex: 1;
        text-align: center;
        font-size: 16px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(140, 140, 140, 1);
      }
      span.active {
        color: #333;
        font-weight: 500;
        font-size: 16px;
      }
    }
  }

  .right-tabs {
    width: 60px;
    display: flex;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    & span {
      &.cao {
        width: 40px;
        height: 44px;
        padding: 10px;
        img {
          width: 20px;
          height: 20px;
          margin-top:15px;
          display: block;
        }
      }
    }
  }
}
.cd-body {
  background: #f0f2f5;
  padding-bottom: 100px;
  box-sizing: border-box;
  // min-height: 50vh;
  height: 86vh;
  overflow: scroll;
}
.cd-info {
  padding: 10px;
  background: #fff;
  position: relative;
  .info-collect {
    position: absolute;
    right: 20px;
    top: 0px;
    width: 50px;
    height: 50px;
    background: url("../../../assets/images/collections_grey.png") no-repeat center
      center;
    background-size: 18px;
  }
  .ic-active {
    background: url("../../../assets/theme-img/icon-star.png") no-repeat center
      center;
    background-size: 18px;
  }
  .info-title {
    font-size: 16px;
    font-family: PingFangSC-Medium;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    padding-right: 80px;
    line-height: 30px;
  }
  .info-price {
    font-size: 18px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(238, 31, 31, 1);
    line-height: 30px;
    span {
      font-size: 16px;
    }
    .price-ico {
      width: 16px;
      margin: 0 8px;
    }
    .underline {
      font-size: 12px;
      color: #999;
      text-decoration: line-through;
    }
  }
  .cd-free {
    color: $theme_color;
  }
  .info-com {
    font-size: 16px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.45);
    line-height: 30px;
    font {
      &:nth-child(2) {
        padding-left: 12px;
      }
    }
  }
}
.cd-actives {
  display: flex;
  padding: 10px;
  margin-top: 10px;
  background: #fff;
  p {
    width: 40px;
    font-size: 13px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(140, 140, 140, 1);
  }
  section {
    flex: 1;
    .actives-item {
      display: flex;
      align-items: center;
      .price-ico {
        width: 22px;
        margin-left: 5px;
      }
      &:nth-child(1) {
        padding-bottom: 10px;
      }
      span {
        &:first-child {
          width: 40px;
          height: 18px;
          line-height: 18px;
          background: linear-gradient(
            90deg,
            rgba(206, 184, 156, 1) 0%,
            rgba(163, 130, 89, 1) 100%
          );
          border-radius: 6px;
          font-size: 12px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(38, 38, 38, 1);
          text-align: center;
          margin-right: 5px;
        }
        &:nth-child(2) {
          flex: 1;
          font-size: 11px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(89, 89, 89, 1);
          i {
            color: #ea7a2f;
          }
        }
      }
      font {
        font-size: 12px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(140, 140, 140, 1);
        padding-right: 24px;
        background: url("../../../assets/images/icon-go.png") no-repeat right
          center;
        background-size: 12px 15px;
      }
    }
  }
}
.cd-title {
  font-size: 16px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: rgba(38, 38, 38, 1);
}
.com-style {
  margin-top: 10px;
  background: #fff;
  padding: 10px 15px;
}
.cd-teachers {
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      padding: 5px 0;
      width: 20%;
      display: flex;
      align-items: center;
      flex-direction: column;
      box-sizing: border-box;
      img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
      }
      span {
        padding: 16px 6px 0;
        font-size: 16px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(89, 89, 89, 1);
      }
    }
  }
}
.cd-tro {
  .cd-details {
    font-size: 16px;
    padding: 5px;
    /deep/ p {
      width: 100%;
    }
    /deep/ img {
      width: 100% !important;
    }
  }
}
.course-btn{
    width: 100%;
    background: red;
    color:#fff;
    position: absolute;
    // top: 50%;
    left: 0;
    right:0;
    bottom:0;
    width: 100%;
}
</style>
